<template>
    <div class="box">
        <div class="login">
            <p class="hong">宏烨找房后台系统</p>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" name="用户名" label="账号" placeholder="请输入需要注册账号"
                        :rules="[{ required: true, message: '请填写用户名' }]" class="name"  />
                    <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入个人密码"
                        :rules="[{ required: true, message: '请填写密码' }]" class="password" />
                </van-cell-group>
                <div style="position: absolute; bottom: 30px; left: 10%; width: 80%;">
                    <van-button round block type="primary" native-type="submit" style="z-index: 3;"> 提交 </van-button>
                </div>  
                <!-- <span style="position:absolute; right: 5px; bottom: 10px; color: #ccc;" >去注册</span> -->
            </van-form>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { da } from "element-plus/es/locale";
import { Logins } from "../../api/mysql"
import router from '../../router/index'
import axios from "../../axios/axios"
import type { AxiosRequestConfig } from 'axios'
import { ref, onMounted } from "vue";
const username = ref("");
const password = ref("");
const kehuyanzheng = ref("");

const onSubmit = (values: any) => {
    console.log("submit", values);
    zhuce();
};

function zhuce() {
    axios.post('/xing/user/registry', {
        "username": username.value,
        "password": password.value
    })
        .then(res => {
            console.log(res);
            alert("注册成功");
            router.push('/login')
        })
        .catch(res => {
            console.log(res);
            alert("注册失败");
            username.value = '';
            password.value = '';
        })
    }
</script>
<style  scoped>
.box {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: url("../../assets/abc.jpg") no-repeat;
    background-size: cover;
}

.login {
    width: 23%;
    height: 40%;
    position: absolute;
    top: 25%;
    left: 65%;
    background: #fff;
    line-height: 30px;
    overflow: hidden;
}

.name {
    width: 100%;
    height: 30%;
    margin-top: 60px;
}

.hong {
    font-size: 26px;
    font-weight: 100;
    text-align: center;
    margin-top: 10px;
    border-radius: 10px;
}
</style>